<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link href="details.css" rel="stylesheet" type="text/css"/>
    <style></style>
</head>
<body>
<!--商品列表-->
<div class="shop-list">
    <div class="shop-add">添加商品</div>
    <div class="list" id="1">
        <div class="list-img">
            <img src="下载.jpg"/>
        </div>
        <div class="list-description">
            <ul>
                <li class="shop-name">商品名称:<span>海蓝咖啡</span></li>
                <li class="shop-price">商品价格:<span>20</span><span>21</span><span>22</span></li>
                <li class="shop-size">商品尺寸:<span>大</span><span>中</span><span>小</span></li>
                <li class="shop-description">商品描述:<span>dv费zdvzcvxzdvzcvx撒费zdvzcvxzdvzc费zdvzcvxzdvzcvx撒vx撒电话费撒电话费那啥的呢啡豆来源饮食男女说的不错</span></li>
            </ul>
        </div>
        <!--点击删除会先请求一次ajax,后台删除完毕返回一个flag,成功则前端也删除，不成功就弹出删除失败-->
        <div class="list-btn">
            <input type="button" value="详情" class="detail"/>
            <input type="button" value="编辑" class="edit"/>
            <input type="button" value="删除" class="delete"/>
        </div>
    </div>
</div>
<!--添加商品，是一个隐藏的块，当点击添加商品，让他显示-->
<div class="add-table">
    <ul class="add-list">
        <li>商品主图<input type="text"/></li>
        <li>商品名称<input type="text"/></li>
        <li>商品单价<input type="text"  placeholder="输入size为small的价格"/></li>
        <li class="size-middle"><input type="text" placeholder="输入size为middle的价格"/></li>
        <li class="size-big"><input type="text" placeholder="输入size为big的价格"/></li>
        <li>商品简介<input type="text"/></li>
        <li>商品描述<input type="text"/></li>
        <li>商品分类<input type="text"/></li>
        <li>上架状态<input type="text"/></li>
        <li>商品详情<input type="text" /><div class="detail-add">+</div></li>
    </ul>
    <!--点击取消则让他隐藏且不传数据，点击确认让提交数据-->
    <input type="button" value="取消" class="close"/>
    <input type="button" value="确认" class="submit"/>
</div>
<script src="jquery.min.js"></script>
<script>
    //关闭按钮之后，让原来的块显示，当前块隐藏
    $(".close").click(function(){
        $(this).parent().css("display","none");
        $(".shop-list").css("opacity",1);
    });
    $(".shop-add").click(function(){
        $(".shop-list").css("opacity",0.2);
        $(".add-table").css("display","block")
    });
    //编辑页面的添加描述的添加删除
    $(".detail-add").click(function(){
        $("<li class='indent'><input type=\"text\" value='"+$(this).parent().find("input").val()+"'/><div class=\"detail-del\">-</div></li>").insertAfter($(".detail-add")
            .parent());
        $(this).parent().find("input").val("");
        //删除
    });
    $(".delete").click(function(){
        $.ajax({
            url:'/manager/getAllGoods',
            type:'post',
            data:$(this).parent().parent().id,
            success:function(flag){
                //如果删除成功返回1
                if(flag){
                    $(this).parent().parent().remove();
                }
            },
            error:function(){
                alert("删除不成功")
            }
        })
    });
    //列表加载
    $.ajax({
        url:'/manager/getAllGoods',
        type:'get',
        dataType:'json',
        success:function(json){
            for(var i=0;i<json.length;i++){
                str+=" <div class=\"list\" id='"+json.data[i].goodsId+"'>\n" +
                    "        <div class=\"list-img\">\n" +
                    "            <img src=\"下载.jpg\"/>\n" +
                    "        </div>\n" +
                    "        <div class=\"list-description\">\n" +
                    "            <ul>\n" +
                    "                <li class=\"shop-name\">商品名称:<span>"+json.data[i].goodsName+"</span></li>\n" +
                    "                <li class=\"shop-price\">商品价格:<span>"+json.data[i].goodsSizeMapPrice[0].price+"</span><span>"+json.data[i].goodsSizeMapPrice[1].price+"</span><span>"+json.data[i].goodsSizeMapPrice[2].price+"</span></li>\n" +
                    "                <li class=\"shop-size\">商品尺寸:<span>"+json.data[i].goodsSizeMapPrice[0].size+"</span><span>"+json.data[i].goodsSizeMapPrice[1].size+"</span><span>"+json.data[i].goodsSizeMapPrice[2].size+"</span></li>\n" +
                    "                <li class=\"shop-description\">商品描述:<span>"+json.data[i].goodsDescription+"</span></li>\n" +
                    "            </ul>\n" +
                    "        </div>\n" +
                    "        <div class=\"list-btn\">\n" +
                    "            <input type=\"button\" value=\"详情\" class=\"detail\"/>\n" +
                    "            <input type=\"button\" value=\"编辑\" class=\"edit\"/>\n" +
                    "            <input type=\"button\" value=\"删除\" class=\"delete\"/>\n" +
                    "        </div>\n" +
                    "    </div>"
            }
            $(".shop-list").append(str);
        },
        error:function(){
            console.log("失败了")
        }
    })

</script>
<script src="add-table.js"></script>
</body>
</html>